<html>

<head>
    <style>
        .grandparent {
            background-color: cadetblue;
            display: flex;
            width: 100%;
        }

        #parent {
            display: flex;
            max-width: 100%;
        }

        #child {
            background-color: sandybrown;
        }

        .sibling {
            width: 5px;
            background-color: seashell;
        }
    </style>
    <script>
        window.onload = () => {
            const observer = new ResizeObserver(entries => {
                document.getElementById('child').style = `width:${entries[0].contentRect.width}px`;
            })
            observer.observe(document.getElementById('parent'));
        }
    </script>
</head>

<body>
    <div class="grandparent">
        <div id="parent">
            <div id='child'>child</div>
            <div class="sibling">sibling</div>
        </div>
    </div>
    <div>
        <a href='https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver'>ResizeObserver:</a>
        <span>layout => ResizeObserver => paint</span>
    </div>
</body>

</html>
